// src/components/ChatBubble.tsx
import React from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { ChatMessage } from '../../types';

interface ChatBubbleProps {
  message: ChatMessage;
}

const ChatBubble: React.FC<ChatBubbleProps> = ({ message }) => {
  const isUser = message.role === 'user';

  const formatTime = (timestamp?: Date | string): string => {
    if (!timestamp) return '';

    const date = new Date(timestamp);
    return date.toLocaleTimeString('zh-CN', {
      hour: '2-digit',
      minute: '2-digit'
    });
  };

  return (
      <View style={[styles.container, isUser ? styles.userContainer : styles.aiContainer]}>
        {/* AI头像 */}
        {!isUser && (
            <View style={styles.avatar}>
              <Icon name="smart-toy" size={20} color="#667eea" />
            </View>
        )}

        {/* 消息气泡 */}
        <View style={[styles.bubble, isUser ? styles.userBubble : styles.aiBubble]}>
          <Text style={[styles.messageText, isUser ? styles.userText : styles.aiText]}>
            {message.content}
          </Text>

          {/* 时间和状态信息 */}
          <View style={styles.messageInfo}>
            <Text style={styles.timeText}>
              {formatTime(message.timestamp)}
            </Text>

            {/* Token使用量（仅AI消息显示） */}
            {!isUser && message.tokensUsed && (
                <Text style={styles.tokenText}>
                  {message.tokensUsed} tokens
                </Text>
            )}
          </View>
        </View>

        {/* 用户头像 */}
        {isUser && (
            <View style={[styles.avatar, styles.userAvatar]}>
              <Icon name="person" size={20} color="#fff" />
            </View>
        )}
      </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    marginVertical: 4,
    paddingHorizontal: 15,
  },
  userContainer: {
    justifyContent: 'flex-end',
  },
  aiContainer: {
    justifyContent: 'flex-start',
  },
  avatar: {
    width: 32,
    height: 32,
    borderRadius: 16,
    backgroundColor: '#f0f0ff',
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 5,
  },
  userAvatar: {
    backgroundColor: '#667eea',
    marginLeft: 8,
  },
  bubble: {
    maxWidth: '75%',
    paddingHorizontal: 16,
    paddingVertical: 10,
    borderRadius: 18,
    marginHorizontal: 8,
  },
  userBubble: {
    backgroundColor: '#667eea',
    borderBottomRightRadius: 6,
  },
  aiBubble: {
    backgroundColor: '#fff',
    borderBottomLeftRadius: 6,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 2,
    elevation: 2,
  },
  messageText: {
    fontSize: 16,
    lineHeight: 22,
  },
  userText: {
    color: '#fff',
  },
  aiText: {
    color: '#333',
  },
  messageInfo: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginTop: 6,
  },
  timeText: {
    fontSize: 11,
    color: '#999',
  },
  tokenText: {
    fontSize: 10,
    color: '#999',
    fontStyle: 'italic',
  },
});

export default ChatBubble;